<!--  -->
<template>
  <el-dialog v-model="dialogVisible" title="请假" width="700" draggable>
    <el-space wrap>
      <el-card v-for="item in holidayCategoryList">
        <el-result class="result">
          <template #icon>
            <el-icon size="48px"><component :is="iconItem[item.dictValue]" /></el-icon>
          </template>
          <template #extra>
            <el-text size="large">{{ item.dictLabel }}</el-text>
          </template>
        </el-result>
      </el-card>
    </el-space>
  </el-dialog>
</template>
<script setup lang="ts">
import { ref } from 'vue'
import { useHolidayCategoryStore } from '../../stores'
import { Bowl, MilkTea, Lollipop, Coffee } from '@element-plus/icons-vue'

const holidayCategoryList = useHolidayCategoryStore().getAllState()
const dialogVisible = ref(false)
const iconItem = ref([Bowl, MilkTea, Lollipop, Coffee])

const openDialog = () => {
  dialogVisible.value = true
}
defineExpose({
  openDialog,
})
</script>
<style lang="scss" scoped>
.result {
  padding: 0 0;
}
</style>
